<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>40-jQuery的下拉菜单</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .nav{
            list-style:none;
            width:300px;
            height:50px;
            background:red;
            margin:100px auto;
        }
        .nav>li{
            float:left;
            width:100px;
            height: 50px;
            line-height:50px;
            text-align:center;
            float:left;
        }
        .current{
            display:none;
        }
        .current>li{
            list-style:none;
            background-color:mediumpurple;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>一级菜单
            <ul class="current">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="current">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="current">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $(function(){
          //1.监听1级菜单的鼠标移入事件
          $('.nav>li').mouseenter(function(){
              //1.找到2级菜单
              var $sub = $(this).children('.current')
              //再次触发时，停止上一次的动画
              $sub.stop()
              //2.展开2级菜单
              $sub.slideDown(1000)
          })
          $('.nav>li').mouseleave(function(){
              //1.找到2级菜单
              var $sub = $(this).children('.current')
              //再次触发时，停止上一次的动画
              $sub.stop()
              //2.收起2级菜单
              $sub.slideUp(1000)
          })
      })
    </script>
</body>
</html>